<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        ul {
            width: 200px;
            border: 1px red solid;
            display: flex;
            /* 指定容器元素的排列方式 row(default) column row-reverse column-reverse*/
            flex-direction: row;
            /* 主轴:弹性元素的排列方向成为主轴
                    row:主轴:自左向右
                    column:主轴:自顶向下
                侧轴:与主轴垂直方向的轴
            */
        }
        
        li {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* float: left; */
            /* 弹性元素的属性 
                父元素有多余的空间时,子元素如何伸展    
                0:不伸展
            */
            /* flex-grow: 1; */
            /* 各个子元素会按照flex-grow比例分配父元素的剩余空间 */
            /* flex-shrink:  */
            /* 各个子元素会按照flex-shrink比例进行收缩,系数越大,收缩约大 */
        }
        
        li:nth-child(1) {
            background-color: pink;
            /* flex-grow: 1; */
            flex-shrink: 1;
        }
        
        li:nth-child(2) {
            background-color: greenyellow;
            /* flex-grow: 2; */
            flex-shrink: 2;
        }
        
        li:nth-child(3) {
            background-color: orangered;
            /* flex-grow: 3; */
            flex-shrink: 3;
        }
    </style>
</head>

<body>
    <!-- 弹性盒,伸缩盒
        css中的布局手段,代替浮动完成页面的布局
        可以使元素具有弹性,元素根据界面大小来进行改变
            弹性容器:
                要使用弹性容器,必须先将一个元素设置为弹性容器
                通过display设置弹性容器
                    display:flex 块级弹性容器
                    display:inline-flex 设置为行内弹性容器
            弹性元素:
                弹性容器的子元素是一个弹性元素(弹性项) 子元素指的是直接子元素,不包含子元素的子元素(我附庸的附庸不是我的附庸)
                一个元素可以同时是弹性元素和弹性容器
     -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

</html>